<template>
  <PageMain>
    <template #body>
      <div class="user-relations-box w-full h-[calc(100%_-_64px)] p-0 m-0 box-border overflow-hidden flex justify-start items-center">
        <div class="left-box w-[280px] h-full p-[20px_24px] overflow-hidden box-border">
          <div class="title w-full h-[64px] p-0 overflow-hidden box-border flex justify-between items-center">
            <span>分配权限</span>
            <span>
              <a-link status="normal" @click="() => popData.role.key = true">
                <template #icon>
                  <icon-plus />
                </template>
              </a-link>
            </span>
          </div>
          <div class="filter-box w-full h-[32px] overflow-hidden box-border p-0">
            <a-input v-model="filter.roleName" placeholder="请输入角色名称" allow-clear>
              <template #suffix>
                <icon-search class="cursor-pointer"  />
              </template>
            </a-input>
           
          </div>
          <div class="role-list w-full h-[calc(100%_-_96px)] overflow-hidden box-border overflow-y-auto">
            <div class="w-full h-[calc(100%_-_42px)] overflow-hidden box-border">
              <roleList 
                :account="accountStr" 
                @checked="handlerRoleChecked" 
                ref="RefRoleList" 
                :filter="filter.roleName" 
                @unbind="getRoles"
              />
            </div>
            <div class="w-full h-[42px] flex justify-center items-center">
              <a-button type="outline" 
                class="text-[#465A80!important] border-[#D3DBEB!important] w-full"
                @click="() => popData.power.key = true"
              >
                <IconPlus></IconPlus>
                添加临时角色
              </a-button>
            </div>
            
          </div>
        </div>
        <div class="right-box w-[calc(100%_-_280px)] h-full box-border overflow-hidden p-[16px_24px_20px_24px]">
          <div class="in-bottom-box w-full h-full box-border p-0 overflow-hidden flex justify-between items-center">
            <div class="tree-box">
              <div class="title w-full flex justify-between items-center">
                <span>菜单与功能权限</span>
                <span>
                  <a-select v-model="service_name" placeholder="请选择系统入口" style="width: 120px;">
                    <a-option value="de-identity-web">认证服务</a-option>
                    <a-option value="de-assetManager-web">资产管理服务</a-option>
                  </a-select>
                </span>
              </div>
              <div class="tree-content bg-[#F2F4F7]">
                <menuTree 
                  :account="accountStr" 
                  :role-id="(role as any)?.role_id" 
                  @checked="handleMenuChecked" 
                  :service-name="service_name"
                  :dis-checked="true"
                />
              </div>
            </div>
            <div class="tree-box">
              <div class="title">
                <span>数据权限（组织维度）</span>
                <span></span>
              </div>
              <div class="tree-content bg-[#F2F4F7]">
                <orgTree 
                  :account="accountStr" 
                  :role-id="(role as any)?.role_id" 
                  @checked="handleOrgChecked" 
                  :dis-checked="true"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="user-submit-box w-full h-[64px] overflow-hidden box-border flex justify-between items-center p-[0_24px]">
        <span></span>
        <span>
          <a-button type="primary" @click="back">关闭</a-button>
          <!-- <a-button type="primary" class="ml-2" @click="saveUserRoles">确定</a-button> -->
        </span>
      </div>
      <popRole :show="popData.role.key" @close="() => popData.role.key = false" @save="RefRoleList.getRoles()" />
      <popPower 
        :account="accountStr" 
        :show="popData.power.key" 
        :service-name="service_name" 
        @close="() => popData.power.key = false"
        @save="RefRoleList.getRoles()"
      />
    </template>
  </PageMain>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
// import { Columns } from './values';
import * as User from '@/api/user';
import PageMain from '@/components/PageBox.vue'
import { Message } from '@arco-design/web-vue';

import roleList from '../components/rolelistBox.vue'
import menuTree from '../components/menuTreeBox.vue'
import orgTree from '../components/orgTreeBox.vue'
import popRole from '../components/popAddRole.vue'
import popPower from '../components/popAddPower.vue'

const router = useRouter()
const route = useRoute()
const accountStr = ref('')
const role = ref<User.TRoleItem>()
const popData = ref({
  role: {
    key: false,
  },
  power: {
    key: false
  }
})
const menuCodes = ref<number[]>([])
const orgCodes = ref<number[]>([])
const filter = ref({
  roleName: ''
})
const RefRoleList = ref()
const service_name = ref('de-assetManager-web')

function back() {
  router.push({
    name: 'userManagementList'
  })
}

function getRoles() {
  RefRoleList.value.getRoles(filter.value.roleName)
}

function saveUserRoles() {
  const account = accountStr.value
  const role_name = role.value?.role_name
  const menu_code = menuCodes.value
  const org_code = orgCodes.value

  if (!role_name) {
    Message.error('请选择角色')
    return
  }
  if (!menu_code.length) {
    Message.error('请选择菜单权限')
    return
  }
  if (!org_code.length) {
    Message.error('请选择组织权限')
    return
  }
  if (!account) {
    Message.error('账号不存在')
    back()
    return
  }

  User.userTempAuths(account, menu_code, org_code, role_name).then(res => {
    if (res.code === 200) {
      Message.success('保存成功')
      back()
      return
    }
    Message.error('保存失败')
  })
  
   
  // const roleIds = Object.keys(rolesChecks.value).filter(key => rolesChecks.value[key])
  // const ids = roleIds.filter(id => id!=='undefined')
  // ids.forEach((item, i) => {
  //   ids[i] = parseInt(item) as any
  // })
  // Api.userTempAuths(account, menu_code, org_code, role_name ).then(res => {
  //   if(res.code) {
  //     Message.success('保存成功')
  //     back()
  //     return
  //   }
  //   Message.error('保存失败')
  // })
}


function handleMenuChecked(checked: number[]) {
  menuCodes.value = [...checked]
}
function handleOrgChecked(checked: number[]) {
  orgCodes.value = [...checked]
}
function handlerRoleChecked(item: User.TRoleItem | undefined) {
  role.value = item
}

onMounted(() => {
  const { account } = route.params
  if (!account) {
    Message.error('账号不存在')
    back()
    return
  }
  accountStr.value = account as string
})
</script>

<style lang="less" scoped>
.user-relations-box{
  .left-box{
    border-width: 0px 1px 0px 0px; border-style: solid; border-color: #EBF0FA;
    .title{
      font-family: Microsoft YaHei; font-size: 16px; font-weight: bold; letter-spacing: 0em;
      span{
        a{
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: bold;
          font-variation-settings: "opsz" auto;
          color: #465A80;
        }
      }
    }
  }

  .right-box{
    .in-bottom-box{
      .tree-box{
        width: calc(50% - 8px); height: 100%; box-sizing: border-box; overflow: hidden;
        border-radius: 8px; border: 1px solid #EBF0FA;
        .title{
          width: 100%; height: 40px; overflow: hidden; box-sizing: border-box; background: #F7F9FC;
          display: flex; justify-content: space-between; align-items: center; padding: 0 12px;
          font-family: Microsoft YaHei; font-size: 16px; font-weight: bold; color: #394D73;
        }
        .tree-content{
          @apply w-full overflow-hidden overflow-y-auto box-border;
          height: calc(100% - 40px); padding: 12px 24px;
        }
      }
    }
  }
}
.user-submit-box{
  box-shadow: 0px 0px 6px 0px rgba(57, 77, 115, 0.1);
}

.role-item-box{
  margin-top: 20px;
  &+.role-item-box{
   
  }
}
</style>
